methods: {
  async fetchlnglat() {
    try {
      const title = await getTitle();
      console.log(title, 'title');
      this.lat = parseFloat(title.msg.lat);
      this.lng = parseFloat(title.msg.lng);
      this.zoom = title.msg.zoom;

      if (!isNaN(this.lat) && !isNaN(this.lng) && map) {
        map.setCenter([this.lng, this.lat]); // 使用从接口返回的经纬度设置地图中心点
        map.setZoom(this.zoom);
      } else {
        console.error('无效的经纬度:', this.lat, this.lng, this.zoom);
      }
    } catch (error) {
      console.error('Error fetching title:', error);
    }
  },

  async initializePointSimplifier() {
    if (pointSimplifierIns) {
      // 如果已经初始化过，直接返回
      return;
    }

    try {
      const { PointSimplifier, utils } = await AMapUI.load(['ui/misc/PointSimplifier', 'lib/utils']);
      
      pointSimplifierIns = new PointSimplifier({
        map: map,
        autoSetFitView: false,
        zIndex: 110,
        getPosition: function (item) {
          if (!item || !item.lnglat || isNaN(item.lnglat[0]) || isNaN(item.lnglat[1])) {
            return '';
          }
          return item.lnglat;
        },
        getHoverTitle: function (dataItem, idx) {
          return `<div style="height: 12vh;width: 16vw;background-color:#FFFFFF;margin:0;padding:0;z-index:9999999">
            <h2>第${idx + 1}台设备</h2>
            <p>${dataItem.detail}</p>
          </div>`;
        },
        renderOptions: {
          pointStyle: {
            width: 6,
            height: 6,
            fillStyle: 'rgba(153, 0, 153, 0.38)'
          },
          hoverTitleStyle: {
            position: 'top'
          }
        }
      });
      
      console.log('PointSimplifier initialized successfully.');
    } catch (error) {
      console.error('Failed to initialize PointSimplifier:', error);
    }
  },

  initPage(DistrictCluster, PointSimplifier, utils) {
    function MyRender(distClusterIns, opts) {
      MyRender.__super__.constructor.apply(this, arguments);
    }

    utils.inherit(MyRender, DistrictCluster.Render.Default);

    utils.extend(MyRender.prototype, {
      // 保持 MyRender 代码不变
    });

    distCluster = new DistrictCluster({
      zIndex: 100,
      map: map,
      autoSetFitView: false,
      getPosition: function (item) {
        if (!item || !item.lnglat || isNaN(item.lnglat[0]) || isNaN(item.lnglat[1])) {
          return null;
        }
        return item.lnglat;
      },
      renderConstructor: MyRender,
      renderOptions: {
        // 保持 renderOptions 代码不变
      }
    });

    window.distCluster = distCluster;

    getequipmentlist({ limit: 10000 }).then(res => {
      if (res.code === 0) {
        let data = res.msg;

        let transformedData = data
          .filter(item => {
            return !isNaN(parseFloat(item.lng)) && !isNaN(parseFloat(item.lat));
          })
          .map(item => {
            return {
              lnglat: [parseFloat(item.lng), parseFloat(item.lat)],
              name: item.name,
              detail: item.detail, // 添加 detail 字段
              iSWorkorder: item.iSWorkorder,
              id: item.id,
              mainBind: item.mainBind,
              status: item.status,
              type: item.type,
              count: item.count
            };
          });

        this.pointsData = transformedData;  // 将数据保存到 pointsData 中

        if (this.showPoints) {
          this.initializePointSimplifier().then(() => {
            pointSimplifierIns.setData(this.pointsData);
          });
        } else {
          distCluster.setData(transformedData);
        }
      } else {
        console.error('API 返回错误:', res);
      }
    }).catch(error => {
      console.error('请求出错:', error);
    });
  },

  showPointCoordinates() {
    // 显示点坐标
    if (pointSimplifierIns && this.pointsData.length > 0) {
      pointSimplifierIns.setData(this.pointsData);
    } else {
      console.error('pointSimplifierIns is not initialized or pointsData is empty.');
    }
  },

  hidePointCoordinates() {
    // 隐藏点坐标（清空数据）
    if (pointSimplifierIns) {
      pointSimplifierIns.setData([]);
    }
  },

  aMapUiLoad() {
    AMapUI.load(['ui/geo/DistrictCluster', 'lib/utils'], (DistrictCluster, utils) => {
      this.initPage(DistrictCluster, utils);
      this.fetchlnglat(); // 确保地图 UI 组件加载完成后再调用 fetchlnglat
    });
  }
}
